<script>
  import {mapState, mapActions} from 'vuex';
  import {XInput, XButton, Group} from 'vux';
  import * as constants from '../../AppConstants';
  import utils from '../../commons/utils'
  export default{
    components: {
      XInput,
      XButton,
      Group,
    },
    props: {
      model: {
        type: Object,
        required: true
      },
      smsType: {
        type: Number,
        default: constants.SMS_VERIFY_CODE_USER_REGISTER
      }
    },
    computed: {
      ...mapState({
        verifyCodeCountDown: state => state.user.verifyCodeCountDown
      }),
      verifyCodeText: function () {
        if (this.verifyCodeCountDown > 0) {
          return `${this.verifyCodeCountDown}秒后重新获取`;
        } else {
          return '获取验证码';
        }
      }
    },
    methods: {
      ...mapActions([
        'sendSmsVerifyCode',
        'showTip'
      ]),
      getVerifyCode: function () {
        if (!this.model.username) {
          this.showTip('请输入手机号')
        } else if (!utils.checkPhone(this.model.username)) {
          this.showTip('手机号格式不正确')
        } else {
          this.sendSmsVerifyCode({username: this.model.username, type: this.smsType})
        }
      }
    },
    activated() {
      this.model.username = utils.getLastUsePhone()
    }
  }
</script>

<template>
  <div>
    <x-input type="number" :max=11 :min=11 :required=false placeholder="输入手机号" v-model="model.username"></x-input>
    <div class="">
      <x-input placeholder="输入验证码" v-model="model.verifyCode">
        <x-button slot="right" class="btn-code" mini type="primary" :disabled="verifyCodeCountDown>0"
                  :text="verifyCodeText" @click.native="getVerifyCode"></x-button>
      </x-input>
    </div>
  </div>
</template>

<style>
  .btn-code {
    position: absolute;
    right: 4px;
    top: 15%;
    width: 100px;
    height: 70%;
    line-height: 1;
    font-size: 12px;
    color: #179de9;
    text-align: center;
    border-radius: 4px;
    background: #f4fafe;
    padding-left: 5px;
    padding-right: 5px;
  }
</style>
